<template>
  <div class="search-nav">
    <div class="tabs-wrap">
      <span
        v-for="(item, index) in btns"
        :key="index"
        :class="{active: index === activeIndex}"
        @click="switchTab(index)"
        :ref="`btn${index}`"
      >
        {{item}}
      </span>
      <div class="bottom-line" :style="bottomLineStyle"></div>
    </div>
    <div class="search-wrap">
      <el-input v-model="keyword">
        <template slot="append">
          <i class="el-icon-search"></i>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      btns: ['协调中', '曝光台', '成功案例'],
      activeIndex: -1,
      keyword: '',
      widthArr: []
    };
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index;
      this.$emit('switchIndex', index);
    }
  },
  computed: {
    bottomLineStyle() {
      if (!this.widthArr.length) {
        return {};
      }
      const width = this.widthArr[this.activeIndex];
      const sum = this.widthArr.slice(0, this.activeIndex).reduce((t, c) => t + c, 0)
        + (20 * this.activeIndex);
      return {
        width: `${width}px`,
        transform: `translateX(${sum}px)`
      };
    }
  },
  mounted() {
    const widthArr = [];
    for (let i = 0; i < this.btns.length; i += 1) {
      widthArr.push(this.$refs[`btn${i}`][0].clientWidth);
    }
    this.widthArr = widthArr;
    this.activeIndex = 0;
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .search-nav {
    position: relative;
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    .tabs-wrap {
      display: flex;
      flex: 1;
      span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin: 0 10px;
        padding: 0 20px;
        font-weight: 500;
        color: @mainBgColor;
        font-size: 16px;
        text-align: center;
        background: #fff;
        border-radius: 10px;
        cursor: pointer;
        &.active {
          color: #fff;
          background: @mainBgColor;
        }
      }
      .bottom-line {
        position: absolute;
        left: 10px;
        bottom: 0;
        height: 1px;
        background-color: @mainBgColor;
        transition: transform ease .3s;
      }
    }
    .search-wrap {
      flex: 0 0 200px;
    }
  }
</style>
